{% extends "base_generic.html" %}

{% block content %}
  <div class="card">
    <div class="card-header bg-primary text-white">
      <h4 class="mb-0"><i class="fas fa-user-plus me-2"></i>用户注册</h4>
    </div>
    <div class="card-body">
      <form method="post">
        {% csrf_token %}
        
        {% if form.errors %}
          <div class="alert alert-danger">
            <p>表单中存在错误，请修正以下问题：</p>
            {{ form.errors }}
          </div>
        {% endif %}
        
        <div class="mb-3">
          <label for="{{ form.username.id_for_label }}" class="form-label">{{ form.username.label }}*</label>
          {{ form.username }}
          <div class="form-text text-muted">
            150个字符以内，仅包含字母、数字和@/./+/-/_
          </div>
        </div>
        
        <div class="mb-3">
          <label for="{{ form.email.id_for_label }}" class="form-label">{{ form.email.label }}*</label>
          {{ form.email }}
        </div>
        
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="{{ form.first_name.id_for_label }}" class="form-label">{{ form.first_name.label }}</label>
            {{ form.first_name }}
          </div>
          <div class="col-md-6 mb-3">
            <label for="{{ form.last_name.id_for_label }}" class="form-label">{{ form.last_name.label }}</label>
            {{ form.last_name }}
          </div>
        </div>
        
        <div class="mb-3">
          <label for="{{ form.password1.id_for_label }}" class="form-label">{{ form.password1.label }}*</label>
          {{ form.password1 }}
          <div class="form-text text-muted">
            <ul>
              <li>密码不能与个人信息太相似</li>
              <li>密码必须至少包含8个字符</li>
              <li>密码不能是常用密码</li>
              <li>密码不能仅包含数字</li>
            </ul>
          </div>
        </div>
        
        <div class="mb-3">
          <label for="{{ form.password2.id_for_label }}" class="form-label">{{ form.password2.label }}*</label>
          {{ form.password2 }}
          <div class="form-text text-muted">
            再次输入相同密码，进行确认
          </div>
        </div>
        
        <div class="d-grid gap-2">
          <button type="submit" class="btn btn-primary">注册</button>
        </div>
      </form>
      
      <div class="mt-3 text-center">
        <p>已有账号？<a href="{% url 'login' %}">立即登录</a></p>
      </div>
    </div>
  </div>
{% endblock %} 